// JavaScript Document

function zuobiaoTop(n,a,b,c){	//通过此函数，创建所有魔方顶层的节点对象，并且求出各个节点的坐标；
		  var p=(c/2)*Math.cos(0.25*Math.PI) 
		   var nodeTop=[];
			nodeTop[0]=''
			for(var i=1;i<=n;i++){
				nodeTop[i]=[];
				nodeTop[i][0]=''
				for(var j=1;j<=n;j++){
					nodeTop[i][j]={};//设定节点对象
					if(i==1&&j==1){
					nodeTop[i][j].x=a;//设定第一个节点的x和y坐标
					nodeTop[i][j].y=b;
					}
					else{
						nodeTop[i][j].x=nodeTop[i][j-1].x+p||nodeTop[i-1][j].x+c;//根据与设定好的节点对象的坐标关系，分别求出此节点的x和y坐标；
						nodeTop[i][j].y=nodeTop[i][j-1].y-p||nodeTop[i-1][j].y;
						}
					}
				}	
				
				return nodeTop
				
			}
function drawTop(n,a,b,c){//此函数，通过各个顶层节点的坐标属性，然后连接纵排的节点，和横排的节点，实现方格的效果；
		var p=(c/2)*Math.cos(0.25*Math.PI) 
		var canvas=document.getElementById('canvas');
		var hua=canvas.getContext('2d')
		var nodeTop=zuobiaoTop(n+1,a,b,c);
	
		var color=['red','yellow','blue','green','black','pink']
		for(var i=1;i<=n;i++){
			for(var j=1;j<=n;j++){
				hua.beginPath();
				hua.lineWidth=2;
				hua.strokeStyle='#eee'
				hua.fillStyle=color[parseInt(Math.random()*7)];
				hua.moveTo(nodeTop[i][j].x,nodeTop[i][j].y)
				hua.lineTo(nodeTop[i][j+1].x,nodeTop[i][j+1].y)
				hua.lineTo(nodeTop[i+1][j+1].x,nodeTop[i+1][j+1].y)
				hua.lineTo(nodeTop[i+1][j].x,nodeTop[i+1][j].y)
				hua.lineTo(nodeTop[i][j].x,nodeTop[i][j].y)
				//hua.fill();
				hua.drawImage(img2,nodeTop[i][j].x,nodeTop[i][j].y-p,c+p,p)
				hua.stroke();
				hua.closePath();	
				}
			}
		
		}
		


function zuobiaoLeft(n,a,b,c){	//通过此函数，创建所有魔方顶层的节点对象，并且求出各个节点的坐标；
		 
		   var nodeLeft=[];
			nodeLeft[0]=''
			for(var i=1;i<=n;i++){
				nodeLeft[i]=[];
				nodeLeft[i][0]=''
				for(var j=1;j<=n;j++){
					nodeLeft[i][j]={};  //设定节点对象
					if(i==1&&j==1){
					nodeLeft[i][j].x=a;//设定第一个节点的x和y坐标
					nodeLeft[i][j].y=b;
					nodeLeft[i][j].centerx=a+c/2;
					nodeLeft[i][j].centery=b+c/2;
					}
					else{
						nodeLeft[i][j].x=(nodeLeft[i][j-1].x)||(nodeLeft[i-1][j].x+c);//根据与设定好的节点对象的坐标关系，分别求出此节点的x和y坐标；
						nodeLeft[i][j].y=(nodeLeft[i][j-1].y+c)||(nodeLeft[i-1][j].y);
						nodeLeft[i][j].centerx=nodeLeft[i][j].x+c/2;
						nodeLeft[i][j].centery=nodeLeft[i][j].y+c/2;
						}
					}
				}	
				
				return nodeLeft
				
			}

	function drawLeft(n,a,b,c){//此函数，通过各个顶层节点的坐标属性，然后连接纵排的节点，和横排的节点，实现方格的效果；
		var canvas=document.getElementById('canvas');
		var hua=canvas.getContext('2d')
		var nodeLeft=zuobiaoLeft(n+1,a,b,c);
		
		var color=['red','yellow','blue','green','black','pink']
		for(var i=1;i<=n;i++){
			for(var j=1;j<=n;j++){
				hua.beginPath();
				hua.lineWidth=2;
				hua.strokeStyle='#eee'
				hua.fillStyle=color[parseInt(Math.random()*7)];
				hua.moveTo(nodeLeft[i][j].x,nodeLeft[i][j].y)
				hua.lineTo(nodeLeft[i][j+1].x,nodeLeft[i][j+1].y)
				hua.lineTo(nodeLeft[i+1][j+1].x,nodeLeft[i+1][j+1].y)
				hua.lineTo(nodeLeft[i+1][j].x,nodeLeft[i+1][j].y)
				hua.lineTo(nodeLeft[i][j].x,nodeLeft[i][j].y)
				
				//hua.fill();
				hua.drawImage(mv2,nodeLeft[i][j].x,nodeLeft[i][j].y,c,c)
				hua.stroke();
				hua.closePath();	
				}
			}
		
		}					
			
	
	
function zuobiaoRight(n,a,b,c){	//通过此函数，创建所有魔方顶层的节点对象，并且求出各个节点的坐标；
		  var p=(c/2)*Math.cos(0.25*Math.PI) 
		   var nodeRight=[];
			nodeRight[0]=''
			for(var i=1;i<=n;i++){
				nodeRight[i]=[];
				nodeRight[i][0]=''
				for(var j=1;j<=n;j++){
					nodeRight[i][j]={};//设定节点对象
					if(i==1&&j==1){
					nodeRight[i][j].x=a+(n-1)*c;//设定第一个节点的x和y坐标
					nodeRight[i][j].y=b;
					}
					else{
						nodeRight[i][j].x=nodeRight[i][j-1].x||nodeRight[i-1][j].x+p;//根据与设定好的节点对象的坐标关系，分别求出此节点的x和y坐标；
						nodeRight[i][j].y=nodeRight[i][j-1].y+c||nodeRight[i-1][j].y-p;
						}
					}
				}	
				
				return nodeRight
				
			}		
			
			

	function drawRight(n,a,b,c){//此函数，通过各个顶层节点的坐标属性，然后连接纵排的节点，和横排的节点，实现方格的效果；
		 var p=(c/2)*Math.cos(0.25*Math.PI) 
		var canvas=document.getElementById('canvas');
		var hua=canvas.getContext('2d')
		var nodeRight=zuobiaoRight(n+1,a,b,c);
		
		var color=['red','yellow','blue','green','black','pink']
		for(var i=1;i<=n;i++){
			for(var j=1;j<=n;j++){
				hua.beginPath();
				hua.lineWidth=2;
				hua.strokeStyle='#eee'
				hua.fillStyle=color[parseInt(Math.random()*7)];
				hua.moveTo(nodeRight[i][j].x,nodeRight[i][j].y)
				hua.lineTo(nodeRight[i][j+1].x,nodeRight[i][j+1].y)
				hua.lineTo(nodeRight[i+1][j+1].x,nodeRight[i+1][j+1].y)
				hua.lineTo(nodeRight[i+1][j].x,nodeRight[i+1][j].y)
				hua.lineTo(nodeRight[i][j].x,nodeRight[i][j].y)
				//hua.fill();
				hua.drawImage(img,nodeRight[i][j].x,nodeRight[i][j].y-p,p,c+p)
				hua.stroke();
				hua.closePath();	
				}
			}
		
		}					
			
function mofang(n,a,b,c){	//魔方函数封装n表示n介魔方,a表示魔方的x起点坐标,b表示魔方的y起点坐标,c表示魔方的每个方格大小
		
		var img=document.getElementById('img');
		var img2=document.getElementById('img2');
		var mv1=document.getElementById('mv1');
		
		var mv2=document.getElementById('mv2');
		mv2.play();
		drawTop(n,a,b,c);
		drawLeft(n,a,b,c);
		drawRight(n,a,b,c);
		
	}		
			
			
			
			
			
			
			
			
			
			
			